/***

  Columns

***/
/* variables */
columnWidth = 320px

.tyto-column
  display        flex
  width          columnWidth
  max-width      columnWidth
  flex-direction column
  flex           0 0 columnWidth
  max-height     100%

  &:hover &__action
    min-height 40px
    height     40px

  &:hover &__actions
    .does--fade
      &:hover
        opacity 1
      opacity   0.4

  &__content
    display        flex
    flex-direction column
    flex           1 1 auto
    width          100%
    max-height     100%
    padding-right  10px
    overflow       auto

  &__mover
    position absolute
    top      0
    left     14px
    flex     0 0 auto
    cursor   move

  &__actions
    text-align  center
    margin      20px 0
    flex        0 0 auto
    position    relative
    align-items center
    .does--fade
      opacity 0

  &__title
    max-width 200px
    min-width 150px
    margin    0
    display   inline-block

  &__menu-btn
    position      absolute
    width         24px
    height        24px
    border-radius 50%
    min-width     24px
    padding       0
    right         5px
    top           0

  &__tasks
    padding       0 10px
    flex          1 1 auto
    overflow-y    auto
    overflow-x    hidden

  &__placeholder
    display    inline-block
    min-width  columnWidth
    height     100%

  &__action
    height        0
    min-height    0
    overflow      hidden
    text-align    center
    display       flex
    align-items   center
    align-content center
    transition    height .25s linear, min-height .25s linear
    i
      flex      1
      font-size 32px
      cursor    pointer
